<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="mm">
        <p>{{m}}</p>
        <!-- 让变量嵌入标签 v-html="去的变量名"   <p>{{m}}</p> -->
        <div style="color: cornflowerblue;"><span v-html="m"></span></div>
    </div>

    <div id="ss">
        <div>{{mg}}</div>
        <div>{{mg2}}</div>
        <input v-model="mg">
    </div>

    <script>
        var mm=new Vue({
            el:'#mm',
            data:{
                m:"<h1>看这里<h2>在看这里</h2></h1>"
            }
        });
    </script>
    <script>
         var ss=new Vue({
            el:'#ss',
            data:{
                mg:"99"
            },
            computed:{
                //计算属性的getter
                mg2:function(){
                //‘this指向vm实例’
                return parseInt(this.mg) + parseInt(this.mg*2);
                }
            },
            watch:{
                mg:function(val){
                    console.log("mg发生改变" + val)
                }
            }
        })
    </script>

    <div id="qq">  
        <div>{{p}}</div>
        <div>{{p1}}</div>
        <div>{{p2}}</div>
    </div>
    <script>
        var qq=new Vue({
            el:"#qq",
            data:{
                p:"你",
                p1:"看",
            },
        computed:{
            p2:function(){
                return this.p + '' +this.p1
            }
        }
        })
    </script>
    <div id="rr">
        <div>姓-{{q1}} ,名-{{q2}}</div>
        
    <!-- 	<div>姓名：{{names}}</div> -->
        姓：<input v-model="q1">
        名：<input v-model="q2"><br>
        姓名:<input v-model="p"><br>
    </div>
    <script type="text/javascript">
        var rr=new Vue({
            el:"#rr",
            data:{
                q1:"芸",
                q2:"溪"
            },
            computed:{
                p:{
                    //getter
                    get:function(){
                        return this.q1 + this.q3 + this.q2 
                    },
                    //setter
                    set: function(value){
                        var names=value.split('')
                        this.q1 = names[0]
                        this.q2=names[names.length -1]
                    }
                }
            }
        })
    </script>
</body>
</html>